<!-- D:/project/app/ydz-app-uniapp/static/images/mine -->
<template>
	<view class="pagebody">
		<view class="topbox">
			<view class=" align-center justify-between">
				<view class=" flex-row align-center">
					<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
						style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="color303b39 fz40 fwbold" >
					添加病例
				</view>
				<view class="">
					
				</view>
			</view>
		</view>
		<view class="" style="padding: 24rpx;">
			<view class="inputbox align-center" style="margin-bottom: 16rpx;">
				<uni-easyinput v-model="caseform.caseName" :placeholderStyle="placeholderStyle"
					placeholder="请输入患者姓名"></uni-easyinput>
			</view>
			<view class="inputbox align-center" style="margin-bottom: 16rpx;">
				<uni-easyinput v-model="caseform.hospital" :placeholderStyle="placeholderStyle"
					placeholder="请输入医院名称"></uni-easyinput>
			</view>
			<view @click="dateshow = true;" class="inputbox align-center justify-between" style="margin-bottom: 16rpx;">
				<view class="" :style="{color:caseform.caseTime.length?'#303b39':'#7E8987'}"
					style="font-size:32rpx;padding-left: 20rpx;">
					{{caseform.caseTime?caseform.caseTime:'请您选择创建病例时间'}}
				</view>
				<view class="">
					<image src="../../static/images/mine/right.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				</view>
			</view>
			<view class="inputbox align-center" style="margin-bottom: 16rpx;">
				<uni-easyinput v-model="caseform.title" :placeholderStyle="placeholderStyle"
					placeholder="病例描述"></uni-easyinput>
			</view>
			<textarea v-model="caseform.caseDescription"
				style="padding-left: 20rpx;width: -webkit-fill-available;line-height: 64rpx;" maxlength="4000"
				placeholder="病例详情(建议200-2000字)" name="" id="" cols="30" rows="10"></textarea>

<!-- 			<uni-section title="选择任意文件" type="line">
				<view class="example-body">
					<uni-file-picker :list-styles="listStyles" mode="all" file-mediatype="all"
						title="上传 jpg/png 、pdf、word文件，且不超过 500kb"></uni-file-picker>
				</view>
			</uni-section> -->
			
			<view class="mt40" style="padding-bottom: 40rpx; border-bottom: 1rpx solid #D7DDDC;">
				<u-upload :header="headers" :action="action" :file-list="showFilelist"
					del-bg-color="#303B39" @on-remove="removelist" @on-success="uploadlist" :index="'file'"></u-upload>
			</view>

			<view class="fwbold addcase align-center justify-center" @click="submit()">
				保存病例
			</view>
			
		</view>
		<u-toast ref="uToast" />
		<u-calendar v-model="dateshow" @change="change" :mode="mode"></u-calendar>
	</view>
</template>

<script>
	import AdvCom from '../../layouts/advcome.vue';
	import {
		getDicts,
		addReport,
		addCase,
		editCase,
		getcase
	} from '@/api/api.js'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	export default {
		components: {

		},
		onLoad(options) {
			if(options.id){
				this.isedit=true
				this.caseid = options.id
				this.getcasething()
			}

		},


		data() {
			return {
				placeholderStyle: "color:#7E8987;font-size:32rpx",
				caseform: {
					caseName: '',
					hospital: '',
					caseTime: '',
					caseDescription: '',
					title: '',
					attachFiles: []
				},
				// 页面展示list
				showFilelist:[],
				dateshow: false,
				mode: 'date',
				listStyles: {
					// 是否显示边框
					border: false,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: '#00D9B2',
						radius: 2
					}
				},
				headers: {
					authorization: 'Bearer ' + getToken()
				},
				action: config.baseUrl + '/common/upload',
				caseid:0,
				isedit:false,
			}
		},
		watch: {},
		created() {},
		methods: {
			change(e) {
				console.log(e)
				this.caseform.caseTime = e.result
			},
			getTypelist() {
				getDicts('violation_type').then(res => {
					this.reportlist = res.data
				})

			},
			getcasething(){
				getcase(this.caseid).then(res=>{
					this.caseform = res.data
					this.showFilelist = res.data.attachFiles
				})
				
			},
			submit() {
				if(this.isedit){
					editCase(this.caseform).then(res => {
						this.$refs.uToast.show({
							title: '修改病例成功',
							type: 'success',
						})
					})
				}else{
					addCase(this.caseform).then(res => {
						this.$refs.uToast.show({
							title: '添加病例成功',
							type: 'success',
						})
					})
				}
				setTimeout(() => {
					// uni.navigateBack({
					// 	delta: 1
					// });
					uni.navigateTo({
						url: '/pages/mine/casePage'
					})
				}, 1000)

			},
			backpage() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// uploadfile() {
			// 	uni.chooseImage({
			// 		success: (chooseImageRes) => {
			// 			const tempFilePaths = chooseImageRes.tempFilePaths;
			// 			const uploadTask = uni.uploadFile({
			// 				url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			// 				filePath: tempFilePaths[0],
			// 				name: 'file',
			// 				formData: {
			// 					'user': 'test'
			// 				},
			// 				success: (uploadFileRes) => {
			// 					console.log(uploadFileRes.data);
			// 				}
			// 			});
				
			// 			uploadTask.onProgressUpdate((res) => {
			// 				console.log('上传进度' + res.progress);
			// 				console.log('已经上传的数据长度' + res.totalBytesSent);
			// 				console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
				
			// 				// 测试条件，取消上传任务。
			// 				if (res.progress > 50) {
			// 					uploadTask.abort();
			// 				}
			// 			});
			// 		}
			// 	});
			// },
			
			removelist(index, lists, name){
				if(this.isedit){
					 this.showFilelist = []
				}
				this.caseform.attachFiles.splice(index,1)

			},
			uploadlist(data, index, lists, name){
				if(this.isedit){
					 this.showFilelist = []
				}
				let fileobj = {
					url:data.url,
					fileName:data.fileName
				}
				this.caseform.attachFiles.push(fileobj)
				
			},


		},

	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #FFF;

		.topbox {
			height: 128rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.2) 0%, rgba(0, 217, 178, 0) 100%);
			padding: 20rpx 24rpx;
		}

		.inputbox {
			height: 96rpx;
			border-bottom: 1px solid #D7DDDC;
		}

		.istype {
			background: #E5FBF7 !important;
			color: #00977C;
			font-weight: bold;
		}

		.addcase {

			margin-top: 179rpx;
			height: 98rpx;
			background: #00D9B2;
			border-radius: 98rpx;
			color: #FFFFFF;
			font-size: 36rpx;
		}


	}
</style>